<template>
	<view class="CircuitDetail">
		<u-toast ref="uToast"></u-toast>
		<u-navbar :leftIcon="leftIcon" title="详情" :placeholder="true" :auto-back="true"></u-navbar>
		<u-loading-page :loading="!detail"></u-loading-page>
		<u-modal @cancel="cardShow=false" @confirm="cardShow=false,$goUrl('/pages/mine/card/buy','to')" :show="cardShow" :showCancelButton="true" cancelText="以后再说" cancelColor="#1E272E" confirm-color="#FF3F34" confirm-text="立即购买">
			<view class="slot-content card_content">
				<view class="card_app">{{appName}}</view>
				<u-image width="320rpx" height="320rpx" src="/static/member.png"></u-image>
				<view class="card_tip">购买卡密后可以免费预约</view>
			</view>
		</u-modal>
		<view v-if="detail">
			<view class="detail_top">
				<view class="detail_swiper">
					<u-swiper height="750rpx" radius="0" :indicator="true" :list="detail.imglist"></u-swiper>
					<view class="circuit_box">
						<view class="flex_box flex_row_between circuit_t">
							<view class="flex_box">
								<view class="circuit_t_price">￥<text>{{detail.price}}</text></view>
								<view class="circuit_t_sub">会员价</view>
							</view>
							<!-- <view class="circuit_t_num">{{detail.ballots}}件</view> -->
						</view>
						<view class="flex_box flex_row_between circuit_b">
							<view class="circuit_b_price">原价：<text>{{detail.money}}</text></view>
							<view class="circuit_b_num">{{detail.ballot}}人已购买</view>
						</view>
					</view>
				</view>
				<view class="circuit_name">{{detail.title}}</view>
				<view class="circuit_sub">{{detail.ticket}}</view>
			</view>
			<view class="detail_b">
				<view class="detail_title">
					<u-divider textColor="#072329" line-color="#D2DAE2" text="商品详情"></u-divider>
				</view>
				<view class="detail_content">
					<u-parse :content="detail.content"></u-parse>
				</view>
			</view>
			<view class="flex_box flex_row_between buy_box">
				<view class="flex_box">
					<view @click="goHome" class="flex_box flex_row_center flex_direction buy_nav">
						<u-image width="60rpx" height="60rpx" src="/static/icon4.png"></u-image>
						<view class="buy_nav_text">首页</view>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view @click="shareFriend" class="flex_box flex_row_center flex_direction buy_nav">
						<u-image width="60rpx" height="60rpx" src="/static/icon9.png"></u-image>
						<view class="buy_nav_text">分享</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="u-reset-button flex_box flex_row_center flex_direction buy_nav">
						<u-image width="60rpx" height="60rpx" src="/static/icon9.png"></u-image>
						<view class="buy_nav_text">分享</view>
					</button>
					<!-- #endif -->
				</view>
				<view v-if="!loginInfo">
					<!-- #ifdef APP-PLUS -->
					<u-button throttleTime="1000" @click="$goUrl('/pages/login/login/login','to')" :custom-style="{width: '414rpx',height: '76rpx',margin: 0}" color="#45B9A2" shape="circle" text="预约"></u-button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<u-button throttleTime="1000" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :custom-style="{width: '414rpx',height: '76rpx',margin: 0}" color="#45B9A2" shape="circle" text="预约"></u-button>
					<!-- #endif -->
				</view>
				<view v-else>
					<u-button throttleTime="1000" @click="goBuy" :custom-style="{width: '414rpx',height: '76rpx',margin: 0}" color="#45B9A2" shape="circle" text="预约"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		circuitDetail,
		checkVip,
		login,
		getInfo
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				leftIcon: 'arrow-left',
				params: {
					id: '',
				},
				detail: null,
				isVip: false,
				cardShow: false,
				appName: ''
			}
		},
		onLoad(options) {
			that = this;
			that.appName = uni.getSystemInfoSync().appName
			if(options.id) that.params.id = options.id
			if(options.invitation) uni.$u.vuex('invitation', options.invitation);
			that.leftIcon = uni.$u.pages().length == 1 ? ' ' : 'arrow-left'
		},
		onShow() {
			that.getDetail()
		},
		onShareAppMessage() {
			return {
				title: that.detail.title,
				path: `/pages/home/circuit/detail?id=${that.params.id}&invitation=${that.userInfo.invitation}`,
				imageUrl: that.detail.image
			}
		},
		methods: {
			getDetail(){
				circuitDetail(that.params).then(res => {
					that.detail = res.data;
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			goBuy(){
				checkVip().then(res => {
					if(res.data != 1){
						that.cardShow = true
						return
					}
					that.$goUrl('/pages/travel/order/order','to',{id: that.params.id})
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
				
			},
			goHome(){
				uni.switchTab({
					url: '/pages/home/index/index'
				})
			},
			shareFriend(){
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl: that.detail.image,
				    title: that.detail.title,
				    miniProgram: {
				        id: that.appId,
				        path: `/pages/home/circuit/detail?id=${that.params.id}&invitation=${that.userInfo.invitation}`,
				        type: 0,
				        webUrl: that.baseUrl
				    },
				    success: ret => {
				        that.$refs.uToast.show({
				        	type: 'success',
				        	title: '分享成功'
				        });
				    }
				});
			},
			// 登录
			getPhoneNumber(e){
				if(!e.detail.code){
					return
				}
				login({phone_code: e.detail.code}).then(res=>{
					uni.$u.vuex("loginInfo", res.data.userinfo);
					getInfo()
						.then(res => {
							if (res.code == 1) {
								uni.$u.vuex('userInfo', res.data);
								if(that.shareInfo){
									let shareInfo = {
										title: that.shareInfo.title, // 默认为小程序名称
										path: `/pages/home/index/index?invitation=${that.userInfo.invitation}`, // 默认为当前页面路径
										imageUrl: that.shareInfo.imageUrl
									}
									that.$u.vuex('shareInfo',shareInfo)
									uni.$u.mpShare = shareInfo
								}
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {});
					that.goBuy()
				}).catch(err=>{
					uni.$u.toast(err.msg);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.CircuitDetail{
		min-height: 100vh;
		background-color: #F6F8FA;
		.card_content{
			position: relative;
			.card_app{
				position: absolute;
				top: 75rpx;
				left: 70rpx;
				font-size: 18rpx;
				font-weight: bold;
				z-index: 2;
				color: #F2A24D;
			}
		}
		.card_tip{
			font-size: 28rpx;
			color: #1E272E;
			font-weight: 500;
			text-align: center;
			padding: 36rpx 0 0;
		}
		.detail_top{
			background-color: #ffffff;
			padding: 24rpx;
			.detail_swiper{
				height: 970rpx;
				overflow: hidden;
				position: relative;
				border-radius: 24rpx;
				.circuit_box{
					background-color: rgba(255,63,52,0.9);
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 2;
					width: 100%;
					height: 220rpx;
					padding: 36rpx;
					.circuit_t{
						height: 74rpx;
						.circuit_t_price{
							color: #ffffff;
							font-weight: bold;
							font-size: 24rpx;
							text{
								font-size: 60rpx;
							}
						}
						.circuit_t_sub{
							width: 88rpx;
							height: 32rpx;
							background: #45B9A2;
							border-radius: 0 16rpx 16rpx 16rpx;
							text-align: center;
							line-height: 32rpx;
							font-size: 20rpx;
							color: #ffffff;
							margin-left: 10rpx;
						}
						.circuit_t_num{
							font-size: 28rpx;
							color: #666666;
							font-weight: bold;
						}
					}
					.circuit_b{
						height: 74rpx;
						.circuit_b_price{
							color: #ffffff;
							font-weight: 500;
							font-size: 24rpx;
							text{
								text-decoration: line-through;
							}
						}
						.circuit_b_num{
							font-size: 24rpx;
							color: #ffffff;
							font-weight: 500;
						}
					}
				}
			}
			.circuit_name{
				font-size: 32rpx;
				color: #000000;
				font-weight: 500;
				line-height: 50rpx;
				padding: 24rpx 0 12rpx;
			}
			.circuit_sub{
				font-size: 24rpx;
				color: #808E9B;
				line-height: 36rpx;
				padding-bottom: 12rpx;
			}
		}
		.detail_b{
			padding: 0 24rpx 140rpx;
			.detail_title{
				padding: 0 152rpx;
			}
		}
		.buy_box{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			background-color: #ffffff;
			padding: 0 36rpx;
			width: 100%;
			height: 112rpx;
			.buy_nav{
				width: 110rpx;
				height: 112rpx;
				.buy_nav_text{
					font-size: 24rpx;
					color: #000000;
					line-height: 36rpx;
				}
			}
		}
	}
</style>
